<template>
	<div class="app-add-list-table">
		<!--可添加配置、编辑配置 的表格-->

		<el-table :data="tableData" style="width: 100%">
			
			<el-table-column 
				v-for="item in options.header"
				:key="item.label"
				:prop="item.propName"
				:label="item.label"
				:class-name="item.class"
				:width="item.width"
	      :align="item.align||'center'"
				>
				<template slot-scope="scope">
					
					<span v-if="!listOptions.editDisabled">
						<el-input @change="emitDataChange" v-model="scope.row[item.propName]" type="text"></el-input>
					</span>
					<span v-else>
						{{scope.row[item.propName]}}
					</span>
					
				</template>
			</el-table-column>
			
			
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					
					<el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">
						<i class="iconfont icon-shanchu" style="font-size: 14px;"></i>
					</el-button>
					
				</template>
			</el-table-column>
		</el-table>
		
		<el-button
			style="margin-top: 10px;"
			v-if="listOptions.defaultNewRow"
			@click="addTableList">添加一行</el-button>

	</div>
</template>

<script>
	export default {
		name: "addlistTable",
		props: [
			"options",
			"data"
		],
		components: {

		},
		data() {
			return {
				listOptions : {
					editDisabled : false , // 可以编辑
					defaultNewRow : {}, // 新增表数据 
				},
				tableData: [],
			}
		},
		mounted() {
			this.listOptions = {
				...this.options,
			};
			this.tableData = [
				...this.data,
			];
			if(!this.tableData.length){
				this.addTableList();
			}
		},
		watch:{
			data(n,o){
				this.tableData =  [...n] ;
				if(!n||!n.length){
					this.addTableList();
				}
			}
		},
		methods: {
			
			emitDataChange(){
				this.$emit("change","addListTable",this.tableData)
			},

			handleDelete(index,row){
				this.tableData.splice(index,1)
				this.emitDataChange();
			},
			
			addTableList(){
				if(this.listOptions.defaultNewRow){
					this.tableData.push(JSON.parse(JSON.stringify(this.listOptions.defaultNewRow)))
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "../../../styles/variables.scss";
	.app-add-list-table {
		line-height: 0;
	}
</style>